import React,{ useState, useEffect, useCallback, useRef} from 'react'
import { Input, Button, Table, Pagination } from 'antd'
import pageLayout from '../common/PageLayout'
import { userListApi } from '../../apis/userApi';

function UserList({history}) {
    
    const columns = [
        {
            title: '用户编码',
            dataIndex: 'id',
        },
        {
            title: '用户名',
            dataIndex: 'name',
        },
        {
            title: '用户部门',
            dataIndex: 'dept',
        },
        {
            title: '用户职位',
            dataIndex: 'duties',
        },
        {
            title: '用户电话',
            dataIndex: 'phone',
        },
        {
            title: '备注',
            //列数据在数据项中对应的路径，指数据对象中的key
            dataIndex: 'remark',
        },
        {
            //列头显示文字（函数用法 3.10.0 后支持）
            title: '操作    ',
            //列宽度（指定了也不生效？）
            width: 80,
            //React 需要的 key，如果已经设置了唯一的 dataIndex，可以忽略这个属性
            key: 'tags',
            //生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引
            render: function(row) {
                // debugger
                // console.log(arguments);
                return (
                    <>
                        <span style={{color:'green'}} onClick={
                            function() {
                                // 不能在地址后面直接添加？来进行参数传递
                                // history.push({pathname: '/user/edit?id=' + row.id, state: {id: row.id}, query: {id:row.id}, params: {id:row.id}})
                                history.push({pathname: '/user/edit', state: {id: row.id}, query: {id:row.id}, params: {id:row.id}})
                            }
                        }>编辑</span>
                        <span  style={{color:'red',paddingLeft:'6px'}}>删除</span>
                    </>
                )
            }
        },
    ],
    contentNode = useRef(),
    // 初始化类容高度数据
    [tableHeight,setTableHight] = useState(300),
    // 初始化加载动画
    [loading, setLoading] = useState(true),
    [data,setData] = useState([]),
    // 初始化请求数据
    [query,setQuery] = useState({name: '', page: 4, size: 20}),
    //初始化数据总数
    [total, setTotal] = useState(0)

    const getList = useCallback(async function() {
        let result = await userListApi(query)
        //传输数据并给数据添加一个key
        setData(result.data.rows.map(it =>{
            it.key = it.id
            return it
        }))

        // 更新数量总数
        setTotal(result.data.total)

    }, [query])

    useEffect(function() {
        // 计算页面类容区域高度并更新初始数据
        setTableHight(contentNode.current.clientHeight - 63)
        //因为在另外监听loading的effect中会自动放送请求，因此，不需要在这里发送请求了
        // getList()

        //防抖节流
        let timer = null
        function resizeTable() {
            if(!!timer) {
                clearTimeout(timer)
                timer = null
            }
            timer = setTimeout(function() {
                // 根据浏览器事件跟新页面高度
                setTableHight(contentNode.current.clientHeight - 63)
            },500)
        }

        setTimeout(function(){
            // debugger
            // 页面请求数据成功并渲染，关闭加载动画
            setLoading(false)
        })

        window.addEventListener('resize',resizeTable)

        //清空定时器
        return function(){
            window.removeEventListener('resize', resizeTable)
        }

    }, [loading])

    //因为查询是根据用户的数据条件进行重新过滤查询，因此应该从第一页进行查询
    function queryEvt() {
        setLoading(true)
        setQuery({...query, page: 1})
        //因为serQuery和setLoading是一个异步方法，无法获取到设置的值，因此应该在监听loading或query参数变化的地方来执行数据获取方法
        // getList()
        // debugger
    }

    function onChange(page, size) {
        // console.log('Page: ', size);
        setLoading(true)
        setQuery({...query, page, size})
    }

    useEffect(function() {
        //因该是开始加载才执行数据请求
        if(!!loading) {
            getList()
        }
    },[loading])

    

    return (
        <div className='my-layout-container'>
            <header>
                <Input value={query.name} onChange={
                    evt => {
                        setQuery({...query, name:evt.target.value})
                    }
                } placeholder="输入用户名" />
                <Button type="primary" onClick={queryEvt}>查询</Button>
                <Button type="primary" ghost onClick={function() {history.push('/user/edit')}}>新增</Button>
            </header>
            <article ref={contentNode}>
                <Table size= 'middle'
                columns={columns}
                dataSource={data}
                pagination={false}
                loading={loading}
                scroll={{ y: tableHeight }}
                />
            </article>
            <footer>
                <Pagination size='small'
                showQuickJumper 
                defaultCurrent={1}
                //数据总数 
                total={total} 
                //当前页数
                current={query.page}
                // 每页条数
                pageSize={query.size}
                pageSizeOptions={[20, 50, 100, 150]}
                onChange={onChange}
                showTotal={_total => `共${_total}条数据`} />
            </footer>
        </div>
    )
}

export default pageLayout(UserList)